<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-21 13:41:19
 * @LastEditors: dh
 * @LastEditTime: 2022-07-18 14:14:58
-->
<template>
	<h1>useCount</h1>
	<div @click="dec">count is :{{ current }}</div>
	<el-button type="primary" @click="inc(2)">增加</el-button>
	<el-button type="danger" @click="dec(4)">减少</el-button>
	<el-button type="infi" @click="set(16)">设置为16，但是最大限制了15</el-button>
	<el-button type="warning" @click="reset">reset</el-button>

	<h1>useMouse</h1>
	X:{{ x }} y:{{ y }}

	<h1>useTime</h1>
	time:{{ time }}

	<h1>useURLLoader</h1>
	<h1 v-if="loading">Loading!...</h1>
	<img v-if="loaded" :src="result[0].url" width="400" />
</template>

<script lang="ts">
import { defineComponent, watch } from 'vue';
import useCount from '../../hooks/useCount';
import useMouse from '../../hooks/useMouse';
import useTime from '../../hooks/useTime';
import useURLLoader from '../../hooks/useURLLoader';

interface CatResult {
	id: string;
	url: string;
	width: number;
	height: number;
}
export default defineComponent({
	name: 'CountDemo',
	props: {
		msg: String,
	},
	setup() {
		// 也可以直接在return里面结构，但是不推荐，不好追溯定义源头
		const { current, inc, dec, set, reset } = useCount(2, { min: 1, max: 15 });
		const { x, y } = useMouse();
		const { time } = useTime();
		const { result, loading, loaded } = useURLLoader<CatResult[]>('https://api.thecatapi.com/v1/images/search?limit=1');
		watch(result, () => {
			if (result.value) {
				console.log('value', result.value[0].url);
			}
		});
		return {
			current,
			inc,
			dec,
			set,
			reset,
			x,
			y,
			time,
			loading,
			loaded,
			result,
		};
	},
});
</script>

<style scoped></style>
